import './app2.css'
import $ from 'jquery'

const html=`<section id="app2">
<ol class="tab-bar">
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ol>
<ol class="tab-content">
    <li>111</li>
    <li>222</li>
    <li>333</li>
</ol>
</section>`
const $element = $(html).appendTo($('body>.page'))

const $tabBar = $('#app2 .tab-bar')
const $tabContent = $('#app2 .tab-content')
const localIndex = localStorage.getItem('localKey') || 0

$tabBar.on('click', 'li', (e) => {  //可以监听子元素，这样就可以只监听一次
    const $li = $(e.currentTarget)
    //e.target事件触发的元素,e.currentTarget指向事件绑定的元素。原本是dom元素，所以用$封装成jquery元素
    $li.addClass('selected')
        .siblings().removeClass('selected')
    const index = $li.index()  //得到点击的是第几个元素
    $tabContent.children()
        .eq(index).addClass('active')
        .siblings().removeClass('active')
    localStorage.setItem('localKey',index)
})
$tabBar.children().eq(localIndex).trigger('click')

// $bar1.on('click',()=>{
//     $content1.addClass('active')
// })
// $bar2.on('click',()=>{
//     $content2.addClass('active')
// })